<template>
  <div class="top-rated-item">
      <div class="poster default-img-bg">
        <img :src="img.replace('w.h', '170.230')">
        <span class="wish-bg"></span>
          <span class="score" v-if="globalReleased && sc !== 0">观众评分&nbsp;&nbsp;<span class="rated-score">{{sc}}</span></span>
          <span class="score" v-else><span class="rated-score">{{wish}}</span>想看</span>
      </div>
      <h5 class="name line-ellipsis">{{nm}}</h5>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['id', 'img', 'globalReleased', 'wish', 'sc', 'nm']
}
</script>

<style lang="scss" scoped>
.top-rated-item {
  display: inline-block;
  width: 85px;
  overflow: hidden;
  margin-right: 10px;
  position: relative;
  .poster {
    width: 85px;
    height: 115px;
    position: relative;
    margin-bottom: 6px;
    img {
      height: 100%;
      width: 100%;
    }
    .wish-bg {
      display: inline-block;
      width: 100%;
      height: 35px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
    }
  }
  .name {
    margin: 0;
    font-size: 13px;
    color: #222;
    margin-bottom: 3px;
    font-weight: bold;
  }
  .score {
    position: absolute;
    left: 4px;
    bottom: 2px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
  }
}
</style>
